<template>
  <view class="myAppointments-page">
    <NavBar title="我的预约" />

    <view class="tags">
      <view
        class="tag"
        v-for="item in regStatusEnum"
        :key="item.value"
        :class="{ active: currentTag === item.value }"
        @tap="handleTag(item.value)"
      >
        {{ item.text }}
      </view>
    </view>

    <view class="list">
      <view
        class="list-item"
        v-for="item in list"
        :key="item.registerId"
        @tap="handleItem(item.registerId)"
      >
        <view class="top">
          <view class="text">{{ item.deptName }}</view>
          <view class="tag" :class="[`tag-${item.regStatus}`]">{{
            regStatusEnum?.find((target) => target.value === item.regStatus)
              ?.text ?? "--"
          }}</view>
        </view>

        <view class="rows">
          <view class="row">
            <view class="text">医　生：</view>
            <view class="value"> {{ item?.doctorName ?? "--" }} </view>
          </view>

          <view class="row">
            <view class="text">时　段：</view>
            <view class="value">
              {{ item.visitDate }} 第{{ item.visitSeqNo }}号
              {{ item.visitStartTime }}
            </view>
          </view>

          <view class="row">
            <view class="text">挂号费：</view>
            <view class="value red">
              {{ (item.regFee / 100).toFixed(2) }}元
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import Taro from "@tarojs/taro";
import { useReady } from "@tarojs/taro";
import NavBar from "../../components/NavBar.vue";
import { useUserStore } from "../../stores/userStore";
import { ref, computed } from "vue";

const userState = useUserStore();
const regStatusEnum = [
  {
    text: "全部",
    value: "-1",
  },
  {
    text: "待取",
    value: "1",
  },
  {
    text: "待诊",
    value: "3",
  },
  {
    text: "已诊",
    value: "5",
  },
  {
    text: "过期",
    value: "7",
  },
  {
    text: "已退",
    value: "6",
  },
];
const currentTag = ref<string>("-1");
const loading = ref<boolean>(false);

const handleTag = (index: string) => {
  if (index === currentTag.value) {
    return;
  }

  currentTag.value = index;
};

const handleItem = (id: number) => {
  Taro.navigateTo({
    url: `/pages/myAppointmentsInfo/myAppointmentsInfo?id=${id}`,
  });
};

const list = computed(() => {
  if (currentTag.value === "-1") {
    return userState.appointmentList;
  }

  return userState.appointmentList.filter((item) => {
    return item.regStatus?.toString() === currentTag.value?.toString();
  });
});

const getAppointmentListApi = async () => {
  if (loading.value) {
    return;
  }

  try {
    loading.value = true;

    const params = {
      pageNo: 1,
      pageSize: 100000,
    } as Record<string, any>;

    // if (currentTag.value !== "-1") {
    //   params.regStatus = currentTag.value;
    // }

    await userState.getAppointmentListApi(params);
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
};

useReady(() => {
  getAppointmentListApi();
});
</script>

<style lang="scss">
.myAppointments-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #ffffff;

  .tags {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    padding: 0px 16px;

    .tag {
      font-weight: 400;
      font-size: 14px;
      color: #000000;
      text-align: left;
      font-style: normal;
      text-transform: none;
      position: relative;

      &.active {
        color: #16ada4;
        font-weight: 500;

        &::after {
          content: "";
          display: block;
          width: 100%;
          height: 2px;
          background: #16ada4;
          border-radius: 2px;
          position: absolute;
          bottom: -4px;
          left: 0;
        }
      }

      .num {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 14px;
        height: 14px;
        background: #fb3d19;
        border-radius: 14px;
        font-weight: 400;
        font-size: 9px;
        color: #ffffff;
        position: absolute;
        top: -7px;
        right: -12px;
        z-index: 10;
      }
    }
  }

  .list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 30px;
    background: #f8f8f8;
    overflow-y: auto;

    .list-item {
      display: flex;
      flex-direction: column;
      gap: 13px;
      width: 100%;
      height: 160px;
      padding: 16px;
      background: #ffffff;

      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;

        .text {
          font-weight: 500;
          font-size: 18px;
          color: #333333;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }

        .tag {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0px 4px;
          height: 20px;
          background: #f2f3ff;
          border-radius: 3px 3px 3px 3px;
          font-weight: 400;
          font-size: 12px;
          color: #0052d9;
          line-height: 20px;
          text-align: left;
          font-style: normal;
          text-transform: none;

          // 待取
          &.tag-1 {
            background: #fff0ed;
            color: #d54941;
          }

          // 待诊
          &.tag-3 {
            background: #fff3e9;
            color: #e37318;
          }

          // 已诊
          &.tag-5 {
            background: #f2f3ff;
            color: #0052d9;
          }

          // 过期
          &.tag-7 {
            background: #f3f3f3;
            color: rgba(0, 0, 0, 0.2);
          }

          // 已退
          &.tag-6 {
            background: #f3f3f3;
            color: rgba(0, 0, 0, 0.9);
          }
        }
      }

      .rows {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;

        .row {
          display: flex;
          align-items: center;
          width: 100%;

          .text {
            font-weight: 400;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.4);
            text-align: left;
            font-style: normal;
            text-transform: none;
          }

          .value {
            padding-left: 14px;
            font-weight: 400;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.9);
            text-align: left;
            font-style: normal;
            text-transform: none;

            &.red {
              font-weight: 500;
              font-size: 16px;
              color: #ef4141;
              text-align: right;
              font-style: normal;
              text-transform: none;
            }
          }
        }
      }
    }
  }
}
</style>
